<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>栅格系统</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
	<style>
.a{
height:50px;
width:200px;
border:1px solid #ccc;
background-color:#eee;

}

.b{
height:50px;
border:1px solid #ccc;
background-color:red;

}
.menu{font-family:"ו"; width:440px; margin:0;}
.menu ul{padding:0; list-style-type:none;}
.menu ul li{float:left; position:relative}
.menu ul li a,.menu  ul li a:visited{display:block; text-align:center; text-decoration:none; width:104px; height:30px; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#5678ee; line-height:30px; font-size:14px}
.menu ul li:hover a{color:#fff}
.menu ul li ul{display:none}
.menu ul li:hover ul{display:block; position:absolute; top:31px; left:0px; width:105px}
.menu ul li:hover ul li a{display:block; background:#ff4321; color:#000}
.menu ul li:hover ul li a:hover{background:#dfc184; color:#000}




	</style>
	
	</head>
<body>

大的导航条，不需要设置body

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">基本导航</p>

<nav class="navbar navbar-default">

...

</nav>
 
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">基本导航反转</p>

<nav class="navbar navbar-inverse">

...

</nav>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">基本导航包括包含标题和列表 </p>

<nav class="navbar navbar-default"> <div class="container">

<div class="navbar-header">

<a href="#" class="navbar-brand">标题</a> </div>


<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li>
 <li><a href="#">资讯</a></li>
<li class="disabled"><a href="#">产品</a></li> 
<li><a href="#">关于</a></li>

</ul>

</div>

</nav>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">导航条中使用表单 </p>

<nav class="navbar navbar-default"> <div class="container">

<div class="navbar-header">

<a href="#" class="navbar-brand">标题</a> </div>


<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li>
<li class="disabled"><a href="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>
<!--套表单--->
<form action="" class="navbar-form navbar-left"> <div class="input-group">

<input type="text" class="form-control"> <span class="input-group-btn">

<button type="submit" class="btn btn-default">提交</button> </span>

</div>

</form>
<!--套表单--->



</div>

</nav>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">导航条中使用表单2 </p>

<nav class="navbar navbar-default"> <div class="container">

<div class="navbar-header">

<a href="#" class="navbar-brand">标题</a> </div>


<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li>
<li class="disabled"><a href="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>
<!--套表单--->
<form action="" class="navbar-form navbar-right"> <div class="input-group">

<input type="text" class="form-control"> <span class="input-group-btn">

<button type="submit" class="btn btn-default">提交</button> </span>

</div>

</form>
<!--套表单--->



</div>

</nav>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">导航条中使用按钮 </p>
<nav class="navbar navbar-default"> <div class="container">

<div class="navbar-header">

<a href="#" class="navbar-brand">标题</a> </div>


<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li>
<li class="disabled"><a href="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>
<!--套表单--->
<form action="" class="navbar-form navbar-right"> <div class="input-group">

<input type="text" class="form-control"> <span class="input-group-btn">

<button type="submit" class="btn btn-default">提交</button> </span>

</div>

</form>
<!--套表单--->

<button class="btn btn-default navbar-btn">按钮</button>

</div>

</nav>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">导航条中使用按钮 </p>
<nav class="navbar navbar-default"> <div class="container">

<div class="navbar-header">

<a href="#" class="navbar-brand">标题</a> </div>


<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li>
<li class="disabled"><a href="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>
<!--套表单--->
<form action="" class="navbar-form navbar-right"> <div class="input-group">

<input type="text" class="form-control"> <span class="input-group-btn">

<button type="submit" class="btn btn-default">提交</button> </span>

</div>

</form>
<!--套表单--->

<button class="btn btn-default navbar-btn navbar-right">按钮</button>

</div>

</nav>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">导航条中使用按钮加文本 </p>
<nav class="navbar navbar-default"> <div class="container">

<div class="navbar-header">

<a href="#" class="navbar-brand">标题</a> </div>


<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li>
<li class="disabled"><a href="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>
<!--套表单--->
<form action="" class="navbar-form navbar-right"> <div class="input-group">

<input type="text" class="form-control"> <span class="input-group-btn">

<button type="submit" class="btn btn-default">提交</button> </span>

</div>

</form>
<!--套表单--->

<button class="btn btn-default navbar-btn navbar-right">按钮</button>
<p class="navbar-text">我是一段文本</p>
</div>

</nav>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">导航条中使用按钮加文本 </p>
<nav class="navbar navbar-default"> <div class="container">

<div class="navbar-header">

<a href="#" class="navbar-brand">标题</a> </div>


<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li>
<li class="disabled"><a href="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>
<!--套表单--->
<form action="" class="navbar-form navbar-right"> <div class="input-group">

<input type="text" class="form-control"> <span class="input-group-btn">

<button type="submit" class="btn btn-default">提交</button> </span>

</div>

</form>
<!--套表单--->

<button class="btn btn-default navbar-btn navbar-left">按钮</button>
<p class="navbar-text">我是一段文本<a href="#" class="navbar-link">---这是非导航链接---</a></p>
</div>

</nav>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">导航条不占满屏 </p>
<div class="container">
<nav class="navbar navbar-default"> 

<div class="navbar-header menu">

<a href="#" class="navbar-brand">标题</a> </div>


<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a>
       <ul>
	   <li><a href="#">打开</a></li>
	   <li><a href="#">保存</a> </li>
	   <li><a href="#">新建</a> </li>
	   </ul>


</li>
<li><a href="#">资讯</a>
       <ul>
	   <li><a href="#">工具栏</a></li>
	   <li><a href="#">标尺</a> </li>
	   <li><a href="#">缩放</a> </li>
	   </ul>
</li>

<li class="disabled"><a href="#">产品</a></li>
 <li><a href="#">关于</a>
     <ul>	 
     <li><a href="#">属性</a></li>
	 <li><a href="#">样式</a> </li>
	 </ul>
 
 
 </li>

</ul>
<!--套表单--->
<form action="" class="navbar-form navbar-right"> <div class="input-group">

<input type="text" class="form-control"> <span class="input-group-btn">

<button type="submit" class="btn btn-default">提交</button> </span>

</div>

</form>
<!--套表单--->




</div>
</nav>
</div>









<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>

</body>
</html>